<template>
  <!-- 查看规则 -->
  <view class="page-container">
    <u-navbar :title="title" placeholder @leftClick="back" :border="false" :shadow="true"></u-navbar>

    <view class="content-wrapper">
      <!-- 个人信息 -->
      <view class="user-info">
        <view class="avatar-container">
          <image v-if="user.img_url" class="user-photo" :src="user.img_url" mode=""></image>
          <view class="user-name-image" v-else>{{ user.worker_name }}</view>
        </view>
        <view class="user-details">
          <text class="username">{{ user.worker_name }}</text>
          <text class="attendance-group">考勤组：{{ kaoqinInfo.classes_name }}</text>
        </view>
      </view>

      <!-- 折叠面板 -->
      <view class="collapse-container">
        <up-collapse :value="collapseList" accordion @change="change" @close="close" @open="open">
          <up-collapse-item title="考勤时间" name="Attendancetime">
            <view class="collapse-content">
              <view class="section-title">上下班时间</view>
              <view class="time-item">周一、二、三、四、五 办公室：08：30-17：30</view>
              <view class="time-item">周六 办公室：08：30-12：00</view>
              <view class="time-item">周日: 休息</view>
            </view>
          </up-collapse-item>

          <up-collapse-item title="考勤范围" name="Attendancerange">
            <view class="collapse-content">
              <text class="range-text">公司总部周边500米范围内</text>
            </view>
          </up-collapse-item>

          <up-collapse-item title="补卡规则" name="Replacementrules">
            <view class="collapse-content">
              <view class="rule-item">缺卡后可以补卡</view>
              <view class="rule-item">补卡起算日期为1号的每个月最多补卡2次</view>
              <view class="rule-item">可补31个自然日内的缺卡</view>
            </view>
          </up-collapse-item>

          <up-collapse-item title="更多规则" name="Docsguide">
            <view class="collapse-content">
              <view class="additional-rule">
                <view class="rule-title">外勤打卡</view>
                <view class="rule-desc">运行外勤打卡，外勤打卡需填写备注</view>
              </view>

              <view class="additional-rule">
                <view class="rule-title">拍照打卡</view>
                <view class="rule-desc">拍照打卡已关闭</view>
              </view>

              <view class="additional-rule">
                <view class="rule-title">人脸识别</view>
                <view class="rule-desc">人脸识别已开启，需要做真人校验</view>
              </view>

              <view class="additional-rule">
                <view class="rule-title">考勤组负责人</view>
                <view class="rule-desc"></view>
              </view>
            </view>
          </up-collapse-item>
        </up-collapse>
      </view>
    </view>
  </view>
</template>

<script>
import clockApi from "@/apis/cloud/clock.js";
import { useUserStore } from '@/pinia-store/user';
import { mapStores } from 'pinia';
export default {
  name: 'ViewRules',
  data () {
    return {
      title: '查看规则',
      collapseList: 'Attendancetime',
      user: {
        img_url: '',
        worker_name: '',
      },
      kaoqinInfo: {}
    }
  },
  computed: {
    ...mapStores(useUserStore)
  },
  created () {
    this.user = this.userStore.user ? this.userStore.user : {
      img_url: null,
      worker_name: '张三'
    };
    this.getLongLat()
  },
  methods: {
    async getLongLat () {
      const userGroupMsg = await clockApi.getLongLat({ depart_id: this.user.depart_id, worker_id: this.user.worker_id })
      if (userGroupMsg.status == 1) {
        this.kaoqinInfo = userGroupMsg.data
      }
    },
    back () {
      uni.navigateBack({ delta: 1 });
    },
    open (e) {
      // console.log('open', e)
    },
    close (e) {
      // console.log('close', e)
    },
    change (e) {
      // console.log('change', e)
    }
  },
}
</script>

<style lang="scss" scoped>
.page-container {
  background-color: #f7f8fa;
  min-height: 100vh;
}

.content-wrapper {
  padding: 25rpx 15rpx;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 30rpx;
}

.avatar-container {
  margin-right: 24rpx;

  display: flex;

  .user-photo {
    width: 86rpx;
    height: 86rpx;
    border-radius: 8rpx;
  }

  .user-name-image {
    width: 86rpx;
    height: 86rpx;
    line-height: 86rpx;
    text-align: center;
    color: #fff;
    border-radius: 8rpx;
    background-color: #0195FF;
  }
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: #eee;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}

.attendance-group {
  font-size: 26rpx;
  color: #999;
}

.collapse-container {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.collapse-content {
  padding: 20rpx 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.time-item,
.rule-item {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
  line-height: 1.6;
}

.range-text {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 20rpx;
}

.map-image {
  width: 100%;
  border-radius: 8rpx;
}

.additional-rule {
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.rule-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.rule-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}
</style>